<template>
  <div class="record-list">
    <group v-if="listData && listData.length > 0">
      <cell-box v-for="(item, index) in listData" :key="index" :class="{'application-padding': !isToDoList}">
        <router-link :to="{ name: routerName, query: {'item': JSON.stringify(item)} }">
          <flexbox>
            <!-- <p v-if="isToDoList" class="apply-status-big success">申請狀態：{{item.statusText}}</p> -->
            <my-apply-type :applyType="item.Type" :isToDoList="isToDoList"></my-apply-type>
            <flexbox-item class="apply-people" :span="6">
              <p class="name">{{item.CreatedNameCh}} {{item.CreatedNameEn}}</p>
              <p class="apply-status-big">{{item.ApplyNo}}</p>
              <p v-if="isToDoList" class="apply-status-big">申请状态：{{item.statusText}}</p>
              <p class="datetime">{{item.CreatedTime.replace('T',' ')}}</p>
            </flexbox-item>
            <!-- 我的申請顯示 -->
            <my-apply-status v-if="!isToDoList" :applyStatus="item.Status"></my-apply-status>
            <!-- 審批記錄顯示 -->
            <my-apply-status v-else :applyStatus="item.ApproverStatus"></my-apply-status>
          </flexbox>
        </router-link>
      </cell-box>
      <!-- 加載更多時候的提示 -->
      <load-more v-if="loadingComponent.loadingShow"
      :show-loading="loadingComponent.hasIcon"
      :tip="loadingComponent.loadingText">
      </load-more>
    </group>
    <my-none-data v-else></my-none-data>
    <!-- 文本提示框 -->
    <!-- <toast v-model="toastShow" :text="toastText" type="text" class="toast-normal" :time="3000" v-transfer-dom></toast> -->
    <!-- 加载中 -->
    <!-- <loading class="loading-mask" :show="loadingShow" text="加载中..." v-transfer-dom></loading> -->
  </div>
</template>

<script>
  import { Group, CellBox, Flexbox, FlexboxItem, LoadMore } from 'vux';
  import ApplyStatus from './ApplyStatus.vue';
  import ApplyType from './ApplyType.vue';
  import NoneData from './NoneData.vue';
  import qs from 'qs';
  export default {
    name: 'RecordList',
    components: {
      Group,
      CellBox,
      Flexbox,
      FlexboxItem,
      LoadMore,
      'my-apply-status': ApplyStatus,
      'my-apply-type': ApplyType,
      'my-none-data': NoneData
    },
    props: ['toDoListData', 'isToDoList', 'idName', 'ajaxUrl', 'ajaxData'],
    data () {
      return {
        listData: [],
        routerName: '',
        pageIndex: 1,
        pageSize: 8,
        loadingComponent: {
          loadingText: '加载中',      // 提示文字
          loadingShow: false,        // 是否顯示此組件
          hasIcon: true,             // 加载中圖標
          isLoading: false,          // 是否加载中
          hasMore: true              // 是否還有更多
        }
      };
    },
    mounted () {
      if (this.$route.name === 'ToDoList') {
        this.routerName = 'ToDoDetail';
      } else {
        this.routerName = 'ApplicationDetail';
      }
      this.parseListData(this.toDoListData);
      if (this.listData.length >= 8) {
        this.changeLoadStatus('加载中', true, true, false, true);
      }
      document.querySelector(`#${this.idName}`).addEventListener('scroll', () => {
        let isLoading = this.loadingComponent.isLoading;
        let isBottom = this.getScrollTop() + this.getWindowHeight() === this.getScrollHeight();
        let hasMore = this.loadingComponent.hasMore;
        let scrollBox = document.querySelector(`#${this.idName}`);
        if (isBottom && !isLoading && hasMore) {
          let postData = {
            data: {
              StaffNo: this.getUserInfo().StaffNo,
              PageIndex: this.pageIndex += 1,
              PageSize: this.pageSize
            }
          };
          for (let prop in this.ajaxData) {
            postData.data[prop] = this.ajaxData[prop];
          };
          this.changeLoadStatus('加载中', true, true, true, true);
          setTimeout(() => {
            scrollBox.scrollTop = scrollBox.scrollHeight;
          }, 100);
          this.axios.post(this.ajaxUrl, qs.stringify(postData))
          .then((res) => {
            if (res.data.data.length === 0) {
              this.changeLoadStatus('我是有底线的', true, false, false, false);
              return false;
            }
            this.changeLoadStatus('加载中', true, true, false, true);
            this.parseListData(this.listData.concat(res.data.data));
          });
        }
      });
    },
    watch: {
      'toDoListData': function (newVal, oldVal) {
        this.parseListData(newVal);
        if (newVal.length >= 8) {
          this.changeLoadStatus('加载中', true, true, false, true);
        }
        this.loadingComponent.loadingShow = this.listData.length >= this.pageSize;
      }
    },
    methods: {
      parseListData: function (resData) {
        if (!this.isToDoList && resData) {
          this.listData = resData.concat();
        } else if (this.isToDoList && resData) {
          let data = resData.concat();
          resData.forEach((item, index) => {
            if (item.Status === 1) {
              data[index].statusText = '审批中';
            } else if (item.Status === 2) {
              data[index].statusText = '已审批';
            } else if (item.Status === 3) {
              data[index].statusText = '已驳回';
            } else if (item.Status === 5) {
              data[index].statusText = '已取消';
            } else if (item.Status === 6) {
              data[index].statusText = '待查阅';
            } else if (item.Status === 7) {
              data[index].statusText = '已查阅';
            }
          });
          this.listData = data;
        }
      },
      changeLoadStatus: function (text, showStatus, hasIcon, isLoading, hasMore) {
        this.loadingComponent = {
          loadingText: text,            // 提示文字
          loadingShow: showStatus,      // 是否顯示此組件
          hasIcon: hasIcon,             // 加载中圖標
          isLoading: isLoading,         // 是否加载中
          hasMore: hasMore              // 是否還有更多
        };
      },
      getScrollTop: function () {
        let scrollTop = document.querySelector(`#${this.idName}`).scrollTop;
        return scrollTop;
      },
      // 文档的总高度
      getScrollHeight: function () {
        let scrollHeight = document.querySelector(`#${this.idName}`).scrollHeight;
        return scrollHeight;
      },
      getWindowHeight: function () {
        let windowHeight = document.querySelector(`#${this.idName}`).clientHeight;
        return windowHeight;
      }
    }
  };
</script>

<style scoped lang="scss">
  @import '../../assets/style/variable';

  .record-list{
    height: 100%;
    .apply-people{
      p{
        line-height: 1;
      }
      .name{
        font-size: getRem(28);
        margin-bottom: getRem(15);
        font-weight: bold;
      }
      .datetime{
        color: #999;
        font-size: getRem(28);
      }
      .apply-status-big{
        color: #666;
        margin-bottom: getRem(15);
        font-size: getRem(28);
      }
    }
    .weui-cell{
      margin-left: getRem(100);
      // padding: getRem(46) 15px getRem(46) 0;
      padding: getRem(36) 15px getRem(36) 0;
      &:before{
        content: "";
        left: 0;
        border-color: #e6e6e6;
      }
      &>a{
        display: block;
        width: 100%;
      }
    }
    .application-padding{
      padding: getRem(46) 15px getRem(46) 0;
    }
    >>>.vux-flexbox.vux-flex-row{
      width: 102%;
    }
    // .apply-status-big{
    //   position: absolute;
    //   // left: -#{getRem(80)};
    //   bottom: getRem(15);
    //   font-size: getRem(28);
    //   &.success{

    //   }
    //   &.fail{

    //   }
    //   &.wait{

    //   }
    // }
  }
</style>
